<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css开关按钮</title>
  <!-- 使用到了 CSS 计算器来控制所有的按钮容器-->
  <style>
    body {
      margin: 0;
      background-color: #f1f9f9;
    }

    #app-cover {
      display: table;
      width: 600px;
      margin: 80px auto;
      /* 重置计数器 button-counter 成0 */
      counter-reset: button-counter;
    }

    .row {
      display: table-row;
    }

    .toggle-button-cover {
      display: table-cell;
      position: relative;
      width: 200px;
      height: 140px;
      box-sizing: border-box;
    }

    .button-cover {
      height: 100px;
      margin: 20px;
      background-color: #fff;
      box-shadow: 0 10px 20px -8px #c5d6d6;
      border-radius: 4px;
    }

    /* 右下角显示序号 */
    .button-cover:before {
      /* 增加计数器 button-counter 值 */
      counter-increment: button-counter;
      /* 使用counter()获取计数器值 */
      content: counter(button-counter);
      position: absolute;
      right: 0;
      bottom: 0;
      color: #d7e3e3;
      font-size: 12px;
      line-height: 1;
      padding: 5px;
    }

    /* 遮罩居中 */
    .button-cover,
    .knobs,
    .layer {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    .button {
      position: relative;
      top: 50%;
      width: 74px;
      height: 36px;
      /* 水平居中 向上调整位置到中间 */
      margin: -20px auto 0 auto;
      /* 部分效果需要有超出容器的按钮 需要隐藏其显示 */
      overflow: hidden;
    }

    /* 圆角按钮 */
    .button.r,
    .button.r .layer {
      border-radius: 100px;
    }

    /* 矩形按钮 */
    .button.b2 {
      border-radius: 2px;
    }

    /* 不显示的 checkbox 获取点击事件*/
    .checkbox {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      opacity: 0;
      cursor: pointer;
      z-index: 3;
    }

    /* 按钮 */
    .knobs {
      z-index: 2;
    }

    /* 按钮的背景层 */
    .layer {
      width: 100%;
      background-color: #ebf7fc;
      transition: 0.3s ease all;
      z-index: 1;
    }

    /* 按钮1 */
    #button-1 .knobs::before {
      content: 'YES';
      position: absolute;
      top: 4px;
      left: 4px;
      width: 20px;
      height: 10px;
      color: #fff;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      line-height: 1;
      padding: 9px 4px;
      background-color: #03A9F4;
      border-radius: 50%;
      transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
    }

    /* 点击隐藏的checkbox改变位置文本并变色 */
    /* 动画效果:向左端移动 */
    #button-1 .checkbox:checked+.knobs::before {
      content: 'NO';
      left: 42px;
      background-color: #f44336;
    }

    /* 点击隐藏的checkbox底层layer背景色 */
    #button-1 .checkbox:checked~.layer {
      background-color: #fcebeb;
    }

    #button-1 .knobs,
    #button-1 .knobs:before,
    #button-1 .layer {
      transition: 0.3s ease all;
    }

    /* 按钮2:yes和no分别从左右两边向容器中移动 */
    #button-2 .knobs:before,
    #button-2 .knobs:after {
      content: 'YES';
      position: absolute;
      top: 4px;
      left: 4px;
      width: 20px;
      height: 10px;
      color: #fff;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      line-height: 1;
      padding: 9px 4px;
      background-color: #03A9F4;
      border-radius: 50%;
      transition: 0.3s ease all;
    }

    #button-2 .knobs:after {
      content: 'NO';
      right: -28px;
      left: auto;
      background-color: #F44336;
    }

    #button-2 .checkbox:checked+.knobs:before {
      left: -28px;
    }

    #button-2 .checkbox:checked+.knobs:after {
      right: 4px;
    }

    #button-2 .checkbox:checked~.layer {
      background-color: #fcebeb;
    }

    /* 按钮3:按钮左右移动并有延申效果 */
    #button-3 .knobs::before {
      content: 'Yes';
      position: absolute;
      top: 4px;
      left: 4px;
      width: 20px;
      height: 10px;
      color: #fff;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      line-height: 1;
      /* 算上内边距长宽都是28px */
      padding: 9px 4px;
      background-color: #03A9F4;
      border-radius: 50%;
      transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
    }

    /* :active 伪类匹配被用户激活的元素,激活时间为当用鼠标交互时,用户按下按键和松开按键之间的时间 */
    #button-3 .checkbox:active+.knobs::before {
      width: 46px;
      border-radius: 100px;
    }

    /* 当按钮已经打开后被按下 旋钮左移 */
    #button-3 .checkbox:checked:active+.knobs:before {
      margin-left: -26px;
    }

    /* 当按钮打开后 旋钮变化*/
    #button-3 .checkbox:checked+.knobs:before {
      content: 'NO';
      left: 42px;
      background-color: #F44336;
    }

    /* 当按钮打开后 旋钮的底层背景颜色变化*/
    #button-3 .checkbox:checked~.layer {
      background-color: #fcebeb;
    }

    /* 按钮4 旋钮从上下方向切换*/
    #button-4 .knobs:before,
    #button-4 .knobs:after {
      position: absolute;
      top: 4px;
      left: 4px;
      width: 20px;
      height: 10px;
      color: #fff;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      line-height: 1;
      padding: 9px 4px;
      background-color: #03A9F4;
      border-radius: 50%;
      transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
    }

    #button-4 .knobs:before {
      content: 'YES';
    }

    #button-4 .knobs:after {
      content: 'NO';
      top: -28px;
      right: 4px;
      left: auto;
      background-color: #F44336;
    }

    /* 上移 */
    #button-4 .checkbox:checked+.knobs:before {
      top: -28px;
    }

    /* 下移 */
    #button-4 .checkbox:checked+.knobs:after {
      top: 4px;
    }

    /* 变色 */
    #button-4 .checkbox:checked~.layer {
      background-color: #fcebeb;
    }

    /* 按钮5 沿Y轴翻转*/
    #button-5 {
      /* perspective指定了观察者与 z=0 平面的距离 */
      perspective: 60px;
      /* 三维元素在观察者后面的部分不会绘制出来,因此需要把高出视角的部分显示 */
      overflow: visible;
    }

    /* 
     * 和之前四个案例不同,这里吧文本信息放到knobs内部的一个span里面
     * 在这里文本不随旋钮翻转,因为会得到镜像的文本,而是同步平移过去
     */
    #button-5 .knobs:before,
    #button-5 .knobs span {
      content: '';
      position: absolute;
      top: 4px;
      left: 4px;
      width: 20px;
      height: 10px;
      color: #fff;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      line-height: 1;
      padding: 9px 4px;
      border-radius: 50%;
      transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
    }

    #button-5 .knobs:before {
      background-color: #03A9F4;
    }

    #button-5 .knobs span:before {
      content: 'YES';
    }

    #button-5 .knobs:before,
    #button-5 .layer {
      transform: rotateY(0);
      transform-origin: center;
    }

    /* 左移 */
    #button-5 .checkbox:checked+.knobs:before,
    #button-5 .checkbox:checked+.knobs span {
      left: 42px;
    }

    /* 绕Y轴旋转变色 */
    #button-5 .checkbox:checked+.knobs:before {
      transform: rotateY(180deg);
      background-color: #f44336;
    }

    /* 文字改变 */
    #button-5 .checkbox:checked+.knobs span:before {
      content: 'NO';
      left: 42px;
    }

    /* 背景一起旋转 */
    #button-5 .checkbox:checked~.layer {
      background-color: #fcebeb;
      transform: rotateY(-180deg);
    }

    /* 按钮6 绕Z轴旋转 */
    #button-6 {
      /* 旋转时显示超出按钮区域的部分 */
      overflow: visible;
    }

    #button-6 .knobs:before {
      content: 'YES';
      position: absolute;
      top: 4px;
      left: 4px;
      width: 20px;
      height: 10px;
      color: #fff;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      line-height: 1;
      padding: 9px 4px;
      background-color: #03A9F4;
      border-radius: 50%;
    }

    #button-6 .layer,
    #button-6 .knobs,
    #button-6 .knobs:before {
      transform: rotateZ(0);
      transition: 0.4s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
    }

    /* 旋钮绕 Z 轴逆时针旋转180度 */
    #button-6 .checkbox:checked+.knobs {
      transform: rotateZ(-180deg);
    }

    /* 旋钮更换文本,这时文本是上下镜像的,需要翻转为正常 */
    #button-6 .checkbox:checked+.knobs:before {
      content: 'NO';
      background-color: #f44336;
      transform: rotateZ(180deg);
    }

    /* 背景同步旋转 */
    #button-6 .checkbox:checked~.layer {
      background-color: #fcebeb;
      transform: rotateZ(180deg);
    }

    /* 按钮7 旋钮YES向右移动并缩小成为旋钮NO的一部分*/
    /* 用内部一个span来模拟Yes旋钮 文本效果通过使伪元素的透明度变化来实现 */
    #button-7 .knobs:before,
    #button-7 .knobs:after,
    #button-7 .knobs span {
      position: absolute;
      top: 4px;
      width: 20px;
      height: 10px;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      line-height: 1;
      padding: 9px 4px;
      border-radius: 50%;
    }

    #button-7 .knobs:before {
      content: 'YES';
      left: 4px;
      color: #fff;
      opacity: 1;
    }

    #button-7 .knobs:after {
      content: 'N';
      left: 42px;
      color: #fff;
      width: 14px;
      text-align: left;
      padding: 9px 7px;
      background-color: #f44336;
      opacity: 0;
    }

    #button-7 .knobs:before,
    #button-7 .knobs:after {
      transition: 0.3s ease all;
      z-index: 2;
    }

    /* 旋钮圆球层级需要比文本低一级 */
    #button-7 .knobs span {
      left: 4px;
      background-color: #03A9F4;
      transition: 0.2s ease all;
      z-index: 1;
    }

    /* 旋钮文本YES完全透明 */
    #button-7 .checkbox:checked+.knobs:before {
      opacity: 0;
    }

    /* 旋钮文本NO不透明 */
    #button-7 .checkbox:checked+.knobs:after {
      opacity: 1;
    }

    /* YES旋钮向右移动变成一个小白点 */
    #button-7 .checkbox:checked+.knobs span {
      top: 14px;
      left: 56px;
      width: 2px;
      height: 2px;
      padding: 3px;
      background-color: #fff;
      z-index: 3;
    }

    /* 背景变色 */
    #button-7 .checkbox:checked~.layer {
      background-color: #fcebeb;
    }

    /* 
     * 按钮8 YES旋钮扩散 同时NO旋钮出现
     */
    #button-8 .knobs:before,
    #button-8 .knobs:after,
    #button-8 .knobs span {
      position: absolute;
      top: 4px;
      width: 20px;
      height: 10px;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      line-height: 1;
      padding: 9px 4px;
      border-radius: 50%;
      transition: 0.3s ease all;
    }

    /* YES 旋钮文本 */
    #button-8 .knobs:before {
      content: 'YES';
      color: #fff;
      left: 4px;
      z-index: 2;
    }

    /* NO 旋钮 */
    #button-8 .knobs:after {
      content: 'NO';
      left: 42px;
      color: #fff;
      background-color: #f44336;
      opacity: 0;
      z-index: 2;
    }

    /* YES 旋钮背景 */
    #button-8 .knobs span {
      left: 4px;
      background-color: #03A9F4;
      z-index: 1;
    }

    /* YES 旋钮文本透明 */
    #button-8 .checkbox:checked+.knobs:before {
      opacity: 0;
    }

    /* NO 旋钮出现 */
    #button-8 .checkbox:checked+.knobs:after {
      opacity: 1;
    }

    /* YES 旋钮背景扩散同时变色，scale()把元素放大 */
    #button-8 .checkbox:checked+.knobs span {
      background-color: #fcebeb;
      transform: scale(4);
    }

    /* 按钮9 左右移动 带回弹 */
    #button-9 .knobs:before,
    #button-9 .knobs:after,
    #button-9 .knobs span {
      position: absolute;
      top: 4px;
      width: 20px;
      height: 10px;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      line-height: 1;
      padding: 9px 4px;
      border-radius: 50%;
      /* 贝塞尔曲线 
       * 贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义
       * P0是（0,0）并且表示初始时间和初始状态
       * P3是（1,1）并且表示最终时间和最终状态
       * X 轴代表时间 Y 轴代表状态，可以是任意值
       * P1：动态取值 (x1, y1)
       * P2：动态取值 (x2, y2)
       * cubic-bezier(x1,y1,x2,y2)
       * 使 y2 > 1可以实现回弹效果 
       */
      transition: 0.4s cubic-bezier(0.18, 0.89, 0.35, 1.23) all;
    }

    /* YES 旋钮文本 */
    #button-9 .knobs:before {
      content: 'YES';
      left: 4px;
    }

    /* NO 旋钮文本 */
    #button-9 .knobs:after {
      content: 'NO';
      right: -24px;
    }

    /* YES|NO 旋钮文本颜色 */
    #button-9 .knobs:before,
    #button-9 .knobs:after {
      color: #fff;
      z-index: 2;
    }

    /* YES|NO 旋钮背景 */
    #button-9 .knobs span {
      left: 4px;
      background-color: #03a9f4;
      z-index: 1;
    }

    /* YES 旋钮文本隐藏 */
    #button-9 .checkbox:checked+.knobs:before {
      left: -24px;
    }

    /* NO 旋钮文本出现 */
    #button-9 .checkbox:checked+.knobs:after {
      right: 4px;
    }

    /* 旋钮背景 位置、颜色改变 */
    #button-9 .checkbox:checked+.knobs span {
      left: 42px;
      background-color: #F44336;
    }

    /* 按钮背景改变 */
    #button-9 .checkbox:checked~.layer {
      background-color: #fcebeb;
    }

    /* 按钮10 矩形旋钮 左右滑动*/
    #button-10 .knobs:before,
    #button-10 .knobs:after,
    #button-10 .knobs span {
      position: absolute;
      top: 4px;
      width: 20px;
      height: 10px;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      line-height: 1;
      padding: 9px 4px;
      border-radius: 2px;
      transition: 0.3s ease all;
    }

    /* YES|NO 旋钮背景 */
    #button-10 .knobs:before {
      content: '';
      left: 4px;
      background-color: #03A9F4;
    }

    /* NO 旋钮文本 */
    #button-10 .knobs:after {
      content: 'NO';
      right: 4px;
      color: #4e4e4e;
    }

    /* YES 旋钮文本 */
    #button-10 .knobs span {
      display: inline-block;
      left: 4px;
      color: #fff;
      z-index: 1;
    }

    /* YES 旋钮文本变色 */
    #button-10 .checkbox:checked+.knobs span {
      color: #4e4e4e;
    }

    /* 旋钮背景移动到右侧(NO)并变色 */
    #button-10 .checkbox:checked+.knobs:before {
      left: 42px;
      background-color: #F44336;
    }

    /* NO 旋钮文本变色 */
    #button-10 .checkbox:checked+.knobs:after {
      color: #fff;
    }

    /* 按钮背景变色 */
    #button-10 .checkbox:checked~.layer {
      background-color: #fcebeb;
    }

    /* 按钮11 矩形旋钮 左右翻页 */
    /* Button 11 */
    #button-11 {
      overflow: visible;
    }

    #button-11 .knobs {
      perspective: 70px;
    }

    #button-11 .knobs:before,
    #button-11 .knobs:after,
    #button-11 .knobs span {
      position: absolute;
      top: 4px;
      border-radius: 2px;
    }

    /* YES|NO 旋钮文本样式 */
    #button-11 .knobs:before,
    #button-11 .knobs:after {
      width: 20px;
      height: 10px;
      color: #4e4e4e;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      line-height: 1;
      padding: 9px 4px;
    }

    /* YES 旋钮文本 */
    #button-11 .knobs:before {
      content: 'YES';
      left: 4px;
    }

    /* NO 旋钮文本 */
    #button-11 .knobs:after {
      content: 'NO';
      right: 4px;
    }

    /* 旋钮盖板 默认在右侧且颜色为蓝 */
    #button-11 .knobs span {
      right: 4px;
      width: 33px;
      height: 28px;
      background-color: #03a9f4;
      transform: rotateY(0);
      /* 旋转中心为左侧中心点 */
      transform-origin: 0% 50%;
      transition: 0.6s ease all;
      z-index: 1;
    }

    /* 旋转盖板 同时变色 */
    #button-11 .checkbox:checked+.knobs span {
      transform: rotateY(-180deg);
      background-color: #f44336;
    }

    /* 按钮背景变色 */
    #button-11 .checkbox:checked~.layer {
      background-color: #fcebeb;
    }

    /* 按钮12 两个盖板分别从左右进出 */
    #button-12 .knobs:before,
    #button-12 .knobs:after,
    #button-12 .knobs span,
    #button-12 .knobs span:before,
    #button-12 .knobs span:after {
      position: absolute;
      top: 4px;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      line-height: 1;
      border-radius: 2px;
      transition: 0.3s ease all;
    }

    /* YES 文本内容和位置 */
    #button-12 .knobs:before {
      content: 'YES';
      left: 4px;
    }

    /* NO 文本内容和位置 */
    #button-12 .knobs:after {
      content: 'NO';
      right: 4px;
    }

    /* YES|NO 文本样式 */
    #button-12 .knobs:before,
    #button-12 .knobs:after {
      width: 27px;
      height: 10px;
      color: #4e4e4e;
      padding: 9px 3px;
      z-index: 1;
    }

    #button-12 .knobs span {
      display: inline-block;
      z-index: 2;
    }

    #button-12 .knobs span,
    #button-12 .knobs span:before,
    #button-12 .knobs span:after {
      width: 20px;
      height: 10px;
      padding: 9px 4px;
    }

    /* 盖板内容、位置 */
    #button-12 .knobs span:before,
    #button-12 .knobs span:after {
      content: '';
      top: 0;
    }

    /* 左盖板位置、颜色*/
    #button-12 .knobs span:before {
      left: -28px;
      background-color: #F44336;
    }

    /* 右盖板位置、颜色 */
    #button-12 .knobs span:after {
      right: -42px;
      background-color: #03A9F4;
    }

    /* 左盖板从左滑进 */
    #button-12 .checkbox:checked+.knobs span:before {
      left: 4px;
    }

    /* 右盖板从右滑出 */
    #button-12 .checkbox:checked+.knobs span:after {
      right: -74px;
    }

    /* 按钮背景颜色变化 */
    #button-12 .checkbox:checked~.layer {
      background-color: #fcebeb;
    }

    /* 按钮13 盖板左右滑动遮挡文本 */
    #button-13 .knobs:before,
    #button-13 .knobs:after,
    #button-13 .knobs span {
      position: absolute;
      top: 4px;
      width: 20px;
      height: 10px;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      line-height: 1;
      padding: 9px 4px;
      border-radius: 2px;
      transition: 0.3s ease all;
    }

    /* YES|NO 文本颜色 层级比盖板低 */
    #button-13 .knobs:before,
    #button-13 .knobs:after {
      color: #4e4e4e;
      z-index: 1;
    }

    #button-13 .knobs:before {
      content: 'YES';
      left: 4px;
    }

    #button-13 .knobs:after {
      content: 'NO';
      right: 4px;
    }

    /* 盖板 层级比文本高 YES 时在右边 */
    #button-13 .knobs span {
      width: 25px;
      left: 37px;
      background-color: #03A9F4;
      z-index: 2;
    }

    /* 盖板向左滑动 变色 */
    #button-13 .checkbox:checked+.knobs span {
      left: 4px;
      background-color: #F44336;
    }

    #button-13 .checkbox:checked~.layer {
      background-color: #fcebeb;
    }

    /* 按钮14 盖板遮挡文本 上下滑动进出*/
    #button-14 .knobs:before,
    #button-14 .knobs:after,
    #button-14 .knobs span:before,
    #button-14 .knobs span:after {
      position: absolute;
      top: 4px;
      width: 20px;
      height: 10px;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      line-height: 1;
      padding: 9px 4px;
      border-radius: 2px;
      transition: 0.3s ease all;
    }

    /* 以下为文本区域样式 */
    #button-14 .knobs:before,
    #button-14 .knobs:after {
      color: #4e4e4e;
      z-index: 1;
    }

    #button-14 .knobs:before {
      content: 'YES';
      left: 4px;
    }

    #button-14 .knobs:after {
      content: 'NO';
      right: 4px;
    }

    /* 盖板父容器 */
    #button-14 .knobs span {
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
    }

    /* 左盖板 YES时不出现*/
    #button-14 .knobs span:before {
      left: 4px;
      top: -28px;
      background-color: #F44336;
    }

    /* 右盖板 */
    #button-14 .knobs span:after {
      top: 4px;
      left: 39px;
      background-color: #03A9F4;
    }

    #button-14 .knobs span:before,
    #button-14 .knobs span:after {
      content: '';
      width: 23px;
      z-index: 2;
    }

    /* 左盖板下滑 */
    #button-14 .checkbox:checked+.knobs span:before {
      top: 4px;
    }

    /* 右盖板上滑 */
    #button-14 .checkbox:checked+.knobs span:after {
      top: -28px;
    }

    #button-14 .checkbox:checked~.layer {
      background-color: #fcebeb;
    }

    /* 按钮15 放大缩小切换*/
    /* 同时切换其透明度和大小即可 */
    #button-15 .knobs:before,
    #button-15 .knobs:after {
      position: absolute;
      top: 4px;
      width: 20px;
      height: 10px;
      color: #fff;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      line-height: 1;
      padding: 9px 4px;
      opacity: 1;
      border-radius: 2px;
      transform: scale(1);
      transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
    }

    #button-15 .knobs:before {
      content: 'YES';
      left: 4px;
      background-color: #03A9F4;
    }

    #button-15 .knobs:after {
      content: 'NO';
      right: 4px;
      opacity: 0;
      transform: scale(4);
      background-color: #F44336;
    }

    #button-15 .checkbox:checked+.knobs:before {
      opacity: 0;
      transform: scale(4);
    }

    #button-15 .checkbox:checked+.knobs:after {
      opacity: 1;
      transform: scale(1);
    }

    #button-15 .checkbox:checked~.layer {
      background-color: #fcebeb;
    }

    /* 按钮16 左右延伸滑动 有回弹 */
    #button-16 .knobs:before {
      content: 'YES';
      position: absolute;
      top: 4px;
      left: 4px;
      width: 20px;
      height: 10px;
      color: #fff;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      line-height: 1;
      padding: 9px 4px;
      background-color: #03A9F4;
      border-radius: 2px;
      transition: 1s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
    }

    /* 鼠标按住时变宽 */
    #button-16 .checkbox:active+.knobs:before {
      width: 46px;
    }

    /* NO 状态时鼠标按住 使其位置左移配合宽度增加可实现从右往延伸效果 */
    #button-16 .checkbox:checked:active+.knobs:before {
      margin-left: -26px;
    }

    #button-16 .checkbox:checked+.knobs:before {
      content: 'NO';
      left: 42px;
      background-color: #F44336;
    }

    #button-16 .checkbox:checked~.layer {
      background-color: #fcebeb;
    }

    /* 按钮17 左右滑动带滑块和文本都有回弹效果 */
    #button-17 .knobs:before,
    #button-17 .knobs span {
      content: 'YES';
      position: absolute;
      top: 4px;
      left: 4px;
      width: 20px;
      height: 10px;
      color: #fff;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      line-height: 1;
      padding: 9px 4px;
    }

    #button-17 .knobs:before {
      transition: 0.3s ease all, left 0.5s cubic-bezier(0.18, 0.89, 0.35, 1.15);
      z-index: 2;
    }

    #button-17 .knobs span {
      background-color: #03A9F4;
      border-radius: 2px;
      transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
      z-index: 1;
    }

    /* 文本滑动变化 */
    #button-17 .checkbox:checked+.knobs:before {
      content: 'NO';
      left: 42px;
    }

    /* 滑块滑动变色 */
    #button-17 .checkbox:checked+.knobs span {
      left: 42px;
      background-color: #F44336;
    }

    #button-17 .checkbox:checked~.layer {
      background-color: #fcebeb;
    }

    /* 按钮18 左右滑动 按住变宽 回弹 */
    #button-18 .knobs:before,
    #button-18 .knobs span {
      content: 'YES';
      position: absolute;
      top: 4px;
      left: 4px;
      color: #fff;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      line-height: 1;
      background-color: #03A9F4;
      border-radius: 2px;
    }

    /* 文本 */
    #button-18 .knobs:before {
      top: 50%;
      left: 8px;
      width: 20px;
      height: 10px;
      margin-top: -5px;
      background-color: transparent;
      z-index: 2;
    }

    /* 滑块 */
    #button-18 .knobs span {
      width: 20px;
      height: 10px;
      padding: 9px 4px;
      transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
      z-index: 1;
    }

    /* 文本：按住变宽 文本透明 超出隐藏 */
    #button-18 .checkbox:active+.knobs:before {
      left: 10px;
      width: 46px;
      height: 4px;
      color: transparent;
      margin-top: -2px;
      background-color: #0095d8;
      transition: 0.3s ease all;
      /* overflow: hidden; */
    }

    /* 滑块:按住变宽 */
    #button-18 .checkbox:active+.knobs span {
      width: 58px;
    }

    /* 文本 NO 状态下鼠标按住 使其变宽方向改变*/
    #button-18 .checkbox:checked:active+.knobs:before {
      left: auto;
      right: 10px;
      background-color: #d80000;
    }

    /* 滑块 NO 状态下鼠标按住 使其变宽方向改变*/
    #button-18 .checkbox:checked:active+.knobs span {
      margin-left: -38px;
    }

    /* NO 状态的文本 */
    #button-18 .checkbox:checked+.knobs:before {
      content: 'NO';
      left: 47px;
    }

    /* NO 状态的滑块 */
    #button-18 .checkbox:checked+.knobs span {
      left: 42px;
      background-color: #F44336;
    }

    #button-18 .checkbox:checked~.layer {
      background-color: #fcebeb;
    }

    /* 作者油管链接 */
    #ytd-url {
      display: block;
      position: fixed;
      right: 0;
      bottom: 0;
      padding: 10px 14px;
      margin: 20px;
      color: #fff;
      font-size: 14px;
      text-decoration: none;
      background-color: #143240;
      border-radius: 4px;
      box-shadow: 0 10px 20px -5px rgba(20, 50, 64, 0.76);
    }
  </style>
</head>

<body>
  <div id="app-cover">
    <div class="row">
      <div class="toggle-button-cover">
        <div class="button-cover">
          <div class="button r" id="button-1">
            <input type="checkbox" class="checkbox">
            <div class="knobs"></div>
            <div class="layer"></div>
          </div>
        </div>
      </div>
      <div class="toggle-button-cover">
        <div class="button-cover">
          <div class="button r" id="button-2">
            <input type="checkbox" class="checkbox">
            <div class="knobs"></div>
            <div class="layer"></div>
          </div>
        </div>
      </div>
      <div class="toggle-button-cover">
        <div class="button-cover">
          <div class="button r" id="button-3">
            <input type="checkbox" class="checkbox">
            <div class="knobs"></div>
            <div class="layer"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="toggle-button-cover">
        <div class="button-cover">
          <div class="button r" id="button-4">
            <input type="checkbox" class="checkbox">
            <div class="knobs"></div>
            <div class="layer"></div>
          </div>
        </div>
      </div>
      <div class="toggle-button-cover">
        <div class="button-cover">
          <div class="button r" id="button-5">
            <input type="checkbox" class="checkbox">
            <!-- span包裹了YES OR NO文本 -->
            <div class="knobs"><span></span></div>
            <div class="layer"></div>
          </div>
        </div>
      </div>
      <div class="toggle-button-cover">
        <div class="button-cover">
          <div class="button r" id="button-6">
            <input type="checkbox" class="checkbox">
            <div class="knobs">
            </div>
            <div class="layer"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="toggle-button-cover">
        <div class="button-cover">
          <div class="button r" id="button-7">
            <input type="checkbox" class="checkbox">
            <div class="knobs">
              <span></span>
            </div>
            <div class="layer"></div>
          </div>
        </div>
      </div>
      <div class="toggle-button-cover">
        <div class="button-cover">
          <div class="button r" id="button-8">
            <input type="checkbox" class="checkbox">
            <div class="knobs">
              <span></span>
            </div>
            <div class="layer"></div>
          </div>
        </div>
      </div>
      <div class="toggle-button-cover">
        <div class="button-cover">
          <div class="button r" id="button-9">
            <input type="checkbox" class="checkbox">
            <div class="knobs">
              <span></span>
            </div>
            <div class="layer"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="toggle-button-cover">
        <div class="button-cover">
          <div class="button b2" id="button-10">
            <input type="checkbox" class="checkbox">
            <div class="knobs">
              <span>YES</span>
            </div>
            <div class="layer"></div>
          </div>
        </div>
      </div>
      <div class="toggle-button-cover">
        <div class="button-cover">
          <div class="button b2" id="button-11">
            <input type="checkbox" class="checkbox">
            <div class="knobs">
              <span></span>
            </div>
            <div class="layer"></div>
          </div>
        </div>
      </div>
      <div class="toggle-button-cover">
        <div class="button-cover">
          <div class="button b2" id="button-12">
            <input type="checkbox" class="checkbox">
            <div class="knobs">
              <span></span>
            </div>
            <div class="layer"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="toggle-button-cover">
        <div class="button-cover">
          <div class="button b2" id="button-13">
            <input type="checkbox" class="checkbox">
            <div class="knobs">
              <span></span>
            </div>
            <div class="layer"></div>
          </div>
        </div>
      </div>
      <div class="toggle-button-cover">
        <div class="button-cover">
          <div class="button b2" id="button-14">
            <input type="checkbox" class="checkbox">
            <div class="knobs">
              <span></span>
            </div>
            <div class="layer"></div>
          </div>
        </div>
      </div>
      <div class="toggle-button-cover">
        <div class="button-cover">
          <div class="button b2" id="button-15">
            <input type="checkbox" class="checkbox">
            <div class="knobs"></div>
            <div class="layer"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="toggle-button-cover">
        <div class="button-cover">
          <div class="button b2" id="button-16">
            <input type="checkbox" class="checkbox">
            <div class="knobs"></div>
            <div class="layer"></div>
          </div>
        </div>
      </div>
      <div class="toggle-button-cover">
        <div class="button-cover">
          <div class="button b2" id="button-17">
            <input type="checkbox" class="checkbox">
            <div class="knobs">
              <span></span>
            </div>
            <div class="layer"></div>
          </div>
        </div>
      </div>
      <div class="toggle-button-cover">
        <div class="button-cover">
          <div class="button b2" id="button-18">
            <input type="checkbox" class="checkbox">
            <div class="knobs">
              <span></span>
            </div>
            <div class="layer"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <a href="https://www.youtube.com/channel/UC7hSS_eujjZOEQrjsda76gA/videos" target="_blank" id="ytd-url">作者 YouTube
    频道</a>
</body>

</html>